<template>
	<view class="my-popup">
		<view class="my-popup__head">
			<view class="popup-title">{{ info.projectName }}</view>
			<text class="popup-close" @click="close">
				<i class="iconfont iconguanbi2"></i>
			</text>
		</view>
		<view class="my-popup__body">
			<view class="popup-count">
				<view class="popup-count__right">
					<view v-for="(item,index) in subMaintainStatus" :key="index">
						<text class="count-num">{{ item.count }}</text>
						<text class="count-name">{{ item.type }}</text>
					</view>
				</view>
			</view>
			<view class="popup-list">
				<view class="popup-list__item">
					<text>项目地址</text>
					<text>{{ maintainInfo.projectAddress }}</text>
				</view>
				<view class="popup-list__item">
					<text>施工单位</text>
					<text>{{ maintainInfo.orgNames }}</text>
				</view>
				<view class="popup-list__item">
					<text>标段</text>
					<text>{{ maintainInfo.tenders }}</text>
				</view>
				<view class="popup-list__item">
					<text>期次</text>
					<text>{{ maintainInfo.buildPeriod }}</text>
				</view>
			</view>
			<view class="popup-bottom">
				<view class="popup-bottom_btn" @click="gotoProductDetails">
					<view class="popup_btn_bg"></view>详情
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMaintainInfo } from '@/common/api/api'
  
	export default {
		name: 'projectPopup',
		props: ['info'],
		data() {
		  return {
				projectId: '',
				subProjectCount: 0,
				maintainInfo: {},
				subMaintainStatus: [
					{type: '维护中', count: 0},
					{type: '历史维护', count: 0}
				]
		  };
		},
		mounted() {
			this.projectId = this.info.projectId;
			getMaintainInfo(this.projectId).then((res)=> {
				if(res.code == 20000){
					this.maintainInfo = res.data
          this.subMaintainStatus.forEach(item=>{
            if(item.type == "维护中"){
              item.count = res.data.process
            }else if(item.type == "历史维护"){
              item.count = res.data.audited
            }
          })
				}
			})
		},
		methods: {
			close() {
				this.$emit('closePopup', 'maintain');
			},
			gotoProductDetails() {
				uni.navigateTo({
					url: `/pages/supervise/supervise?projectId=${this.projectId}`
				})
			},
			gotoStatistics() {
				uni.showToast({
					title: '功能开发中...',
					icon: 'none'
				})
			},
		},
		// watch: {
		// 	info: {
		// 		deep: true, //深度监听对象改变
		// 		immediate: true,	//页面初始化 watch不会执行，true表示立即执行
		// 		handler(n) {
		// 			console.log(n)
		// 		}
		// 	}
		// }
	}
</script>

<style lang="less" scoped>
	.my-popup{
		height: 650rpx;
		background: rgba(5, 38, 102, .8);
		box-shadow: 0px -1px 10px 0px rgba(0, 146, 255, 0.6);
		border-radius: 10px 10px 0px 0px;
		>.my-popup__head{
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 120rpx;
			line-height: 120rpx;
			padding: 0 40rpx 0 60rpx;
			color: #1DCEFD;
			box-sizing: border-box;
			&::before{
				content: '';
				position: absolute;
				top: 50%;
				left: 5%;
				width: 10rpx;
				height: 40rpx;
				border-radius: 4rpx;
				transform: translateY(-50%);
				background: linear-gradient(#00FFFF, #8FEFFF);
			}
			>.popup-title{
				width: 85%;
				height: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			i{
				font-size: 40rpx;
			}
		}
		>.my-popup__body{
			>.popup-count{
				display: flex;
				width: 100%;
				height: 100rpx;
				padding: 0 40rpx;
				box-sizing: border-box;
				.count-num{
					display: block;
					color: #fff;
          margin-bottom: 10rpx;
					/deep/ span{
            font-size: 48rpx;
          }
				}
				.count-name{
					color: #00FFFF;
					font-size: 24rpx;
				}
				>.popup-count__right{
					flex: 1;
					display: flex;
          justify-content: space-around;
					box-sizing: border-box;
					>view{
						width: 50%;
						padding-top: 8rpx;
						line-height: 1;
						text-align: center;
						box-sizing: border-box;
					}
				}
			}
			>.popup-list{
				width: 100%;
				margin-top: 20rpx;
				padding: 0 40rpx;
				box-sizing: border-box;
				>.popup-list__item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height: 70rpx;
					color: #fff;
					font-size: 24rpx;
					border-bottom: 1px solid #133050;
				}
			}
			>.popup-bottom{
				position: fixed;
				bottom: 40rpx;
				display: flex;
				justify-content: space-evenly;
				width: 100%;
				padding: 0 30rpx;
				box-sizing: border-box;
				>.popup-bottom_btn{
					position: relative;
					display: block;
					width: 23%;
					height: 66rpx;
					line-height: 66rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					border-top: 1px solid #00FFFF;
					border-bottom: 1px solid #00FFFF;
					background: #115D9F;
					&::before{
						content: "";
						display: inline-block;
						position: absolute;
						width: 0;
						height: 0;
						top: 0;
						left: -15rpx;
						border-right: 15rpx solid #115D9F;
						border-top: 34rpx solid transparent;
						border-bottom: 34rpx solid transparent;
						z-index: 11;
					}
					&::after{
						content: "";
						display: inline-block;
						position: absolute;
						width: 0;
						height: 0;
						top: 0;
						right: -15rpx;
						border-left: 15rpx solid #115D9F;
						border-top: 34rpx solid transparent;
						border-bottom: 34rpx solid transparent;
						z-index: 11;
					}
					.popup_btn_bg{
						position:absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						&::before{
							content: "";
							display: inline-block;
							position: absolute;
							width: 0;
							height: 0;
							top: -2rpx;
							left: -17rpx;
							border-right: 17rpx solid #00FFFF;
							border-top: 35rpx solid transparent;
							border-bottom: 35rpx solid transparent;
						}
						&::after{
							content: "";
							display: inline-block;
							position: absolute;
							width: 0;
							height: 0;
							top: -2rpx;
							right: -17rpx;
							border-left: 17rpx solid #00FFFF;
							border-top: 35rpx solid transparent;
							border-bottom: 35rpx solid transparent;
						}
					}
				}
			}
		}
	}
</style>
